<template>
  <div style="height:100%">
    <bg-container>
      <a-form :form="form" class="register">
        <h1 class="title">欢迎开通猎头人才帐号，请您确认以下信息</h1>
        <h1 class="en">Please confirm below your information</h1>
        <div class="companyDec">
          <p class="registBlue"><span>邀请单位：</span><span>{{userInfo.invitedBy.name}}</span></p>
          <p class="registBlue"><span>Invited by：</span><span>{{userInfo.invitedBy.nameEn}}</span></p>
        </div>
        <div class="formData">
          <a-form-item label="">
            <a-input v-decorator="[ 'name', { rules: [{ required: true, message: '请填写姓名!' }], }, ]" placeholder="请输入姓名" style="width: 100%" :disabled="isRegister || userInfo.approvalStatus === 'pending'" :class="isRegister || userInfo.approvalStatus === 'pending'?'noBg': ''">
              <i class="iconfont icon-user registBlue" slot="prefix"></i>
            </a-input>
          </a-form-item>
          <a-form-item label="">
            <a-input v-decorator="[ 'phone', { rules: [{ required: true, message: '请填写手机号码!' }], }, ]" placeholder="请输入手机号码" style="width: 100%" :disabled="isRegister || userInfo.approvalStatus === 'pending'"  :class="isRegister || userInfo.approvalStatus === 'pending'?'noBg': ''">
              <i class="iconfont icon-phone registBlue" slot="prefix"></i>
            </a-input>
          </a-form-item>
          <a-form-item label="" class="noBg">
            <a-input v-decorator="[ 'email', { rules: [{ message: '请填写邮箱!' }], }, ]" :disabled="true" placeholder="无邮箱" style="width: 100%" >
              <i class="iconfont icon-letter registBlue" slot="prefix"></i>
            </a-input>
          </a-form-item>
          <a-form-item label="" class="noBg" v-if="iscompany">
            <a-input v-decorator="[ 'company', { rules: [{ message: '请选择公司!' }], }, ]" :disabled="true" placeholder="无公司" style="width: 100%" >
              <i class="iconfont icon-yongrendanwei registBlue" slot="prefix"></i>
            </a-input>
          </a-form-item>
          <a-form-item class="isregist" v-if="iscompany && !isRegister && userInfo.approvalStatus !== 'pending'">
            我的公司已经在系统中注册 <span class="add" @click="cancelModal('showAdd', true)">加入</span>
          </a-form-item>
        </div>
        <p v-if="isRegister || userInfo.approvalStatus === 'pending'" style="display:flex;align-items:center;justify-content:center">
          您已申请加入  <span class="error_text" style="margin-left: 6px">{{corpName || userInfo.tmpEnterpriseName}}</span>  <a-button type="primary" style="width:100px; margin-left:24px" @click="updateCancelToJoin" :loading="loading">撤销</a-button>
        </p>
        <p v-else>
          <a-button type="primary" style="width:310px" @click="confirmCompay" :loading="loading">确认开通  Confirm</a-button>
        </p>
      </a-form>
    </bg-container>
    <add-enterprises :company="userInfo.company" :companies="companies" :visible="showAdd" title="欢迎开通猎头企业，请您确认以下信息" @cancelModal="(data) => addEnter(data)" @close="showAdd = false"/>
    <opening-enterprises :registerloading="registerloading" :visible="showOpen" :company="userInfo.company" title="请确认您的猎头企业" @cancelModal="(data) => update(data, 'login')" @close="showOpen = false"/>
  </div>
</template>
<script>
import BgContainer from '@/components/Common/BgContainer'
import OpeningEnterprises from '@/components/Register/OpeningEnterprises'
import AddEnterprises from '@/components/Register/AddEnterprises'
import { findCompanies, updateEnterprise, edit } from '@/api/register'
import { cancelToJoin } from '@/api/config'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'register',
  components: { BgContainer, OpeningEnterprises, AddEnterprises },
  data () {
    return {
      form: this.$form.createForm(this),
      iscompany: false,
      companies: null,
      showOpen: false,
      showAdd: false,
      isRegister: false,
      registerloading: false,
      corpName: '',
      loading: false
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  created () {
    if (this.userInfo.approvalStatus === 'approved') {
      this.$router.replace('/')
    }
    this.iscompany = this.$route.query.company !== 'PERSONAL' // type：值为COMPANY的话，进入的是有公司的猎头信息页，为PERSONAL的话，进入的是只有猎头信息的页面
    this.findAll()
  },
  mounted () {
    this.form.setFieldsValue({
      name: this.userInfo.name,
      phone: this.userInfo.phone,
      email: this.userInfo.email,
      company: this.userInfo.company
    })
  },
  methods: {
    ...mapMutations('user', ['SET_USER_INFO']),
    addEnter (data) {
      if (data.type) {
        this.cancelModal('showAdd', false, data.type)
      } else {
        this.update(data)
      }
    },
    confirmCompay () {
      if (this.iscompany) {
        this.form.validateFields((error, values) => {
          if (!error) {
            this.cancelModal('showAdd', true)
          }
        })
      } else {
        this.getFromData('login')
      }
    },
    getFromData (login) {
      this.loading = true
      this.form.validateFields((error, values) => {
        if (!error) {
          this.setEdit(values, login)
        } else {
          this.loading = false
        }
      })
    },
    cancelModal (attr, flag, type) {
      if (type) {
        this[type] = true
      }
      if (flag) {
        this.form.validateFields((error, values) => {
          if (!error) {
            this[attr] = flag
          }
        })
      } else {
        this[attr] = flag
      }
    },
    async findAll () {
      let res = await findCompanies()
      if (res.code === 200) {
        this.companies = res.data.items
      } else {
        this.$message.error(res.message)
      }
    },
    async update (data, login) {
      this.registerloading = !!login
      // let params = {
      // uid: '', // 用户id
      // selectEnterpriseId: '', // 所选择的企业id，如果选择了才有该值
      // corpName: '', // 公司中文名称--如果是增加公司，才有该值
      // corpNameEn: '', // 公司英文名称--如果是增加公司，才有该值
      // defaultLanguage: '' // --如果是增加公司，才有该值。企业默认语言，英文传en，中文zh_CN
      // }
      this.corpName = data.name
      let res = await updateEnterprise(data)
      if (res.code === 200) {
        this.getFromData(login)
        this.cancelModal('showAdd', false)
        this.cancelModal('showOpen', false)
      } else {
        this.$message.error(res.message)
      }
      this.registerloading = false
    },
    async setEdit (values, login) {
      let params = {
        name: values.name,
        phone: values.phone,
        id: this.userInfo.id
      }
      if (!this.iscompany) {
        params.firstEdit = true
      }
      let res = await edit(params)
      if (res.code === 200) {
        if (login) {
          // store.commit('user/SET_USER_INFO', res.data)
          this.SET_USER_INFO(null)
          this.$router.replace('/')
        } else {
          this.isRegister = true
        }
        this.$message.success(res.message)
      } else {
        this.$message.error(res.message)
      }
      this.loading = false
    },
    async updateCancelToJoin () { // 撤销加入
      this.loading = true
      let params = {
        id: this.userInfo.id
      }
      let res = await cancelToJoin(params)
      if (res.code === 200) {
        this.SET_USER_INFO(null)
        this.$router.replace('/')
        this.isRegister = false
        this.$message.success(res.message)
      } else {
        this.$message.error(res.message)
      }
      this.loading = false
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../styles/var.styl'
.register
  text-align center
  width 383px
  :global(.ant-input)
    border none
    background f7Grey
    height 44px
    border-radius 44px
    padding 4px 23px 4px 42px
  .noBg
    :global(.ant-input)
      background none
    :global(.ant-input[disabled])
      color registBlue
  .registBlue
    color registBlue
  .title
    font-size 14pt
  .en,.companyDec
    color registBlue
    font-size 10pt
    line-height 17pt
    padding 6px 0
  .companyDec
    margin-bottom 20px
    span
      display inline-block
      width 50%
      text-align right
      &:last-child
        text-align left
  button
    background btnBlue
    border-radius 30px
    line-height 38px
    height 40px
    border none
  .isregist
    margin-bottom 6px
  .add
    font-weight bold
    font-size 12pt
    margin-left 12px
    cursor pointer
    color btnBlue
    border-bottom 1px solid btnBlue
</style>
